<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: zx
  Date: 2023/12/23
  Time: 下午1:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>忘记密码页面</title>

    <style>
        form {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

    </style>


    <script>
        function refreshCaptcha() {
            // document.querySelector('#captchaImg').setAttribute('src',Date.now().toString())
            <%--document.querySelector('#captchaImg').setAttribute('src', `/CaptchaServlet?t=${Date.now().toString()}`)--%>
            document.querySelector('#captchaImg').setAttribute('src', `/CaptchaServlet?t=${Date.now()}`)// 添加时间戳以防止缓存
        }

        function checkPwd(){
            var pwd1 = document.getElementsByName("pwd1");
            var pwd2 = document.getElementsByName("pwd2");
            if (pwd1[0].value !== pwd2[0].value){
                 pwd2[0].value = ""
                alert("两次密码不一致，请检查后重新输入")
                return false
            }else {
                return true
            }
        }

        function check(str){
            var captchaInput = document.getElementsByName("captchaInput");
            var captcha = captchaInput[0].value;
            if(captcha.toLowerCase() === str.toLowerCase()) {
                 event.preventDefault();
                alert("验证码输入错误")
                return true;
            } else {
                return false;
}
        }

    </script>
</head>
<body>

<c:choose>
    <c:when test="${again == 1}">
        <form action="<c:url value="/ForgotServlet"/>" method="post">
            <div class="div">
                手机号 ： <input type="text" name="phone" value="${phone}"><br>
                密 码 ： <input type="text" name="pwd1" placeholder="请输入密码"><br>
                重复密码 ： <input type="text" name="pwd2" placeholder="请再次输入密码"><br>
                <input type="submit" value="忘记密码" onclick="checkPwd()">
            </div>


        </form>
    </c:when>

    <c:otherwise>
        <form action="<c:url value="/ForgotServlet"/>" method="post">
        <div class="div">
            手机号 :  <input type="text" placeholder="请输入注册手机号" name="phone">
            <br>
            验证码 ： <input type="text" name="captchaInput" placeholder="请根据图片输入正确的验证码" required /> <!-- 用户输入验证码 -->
            <img id="captchaImg" src="<c:url value="/CaptchaServlet"/>" alt="Captcha" onclick="refreshCaptcha();" /> <!-- 点击图像刷新验证码 -->
            <button type="submit" onclick="check(<%request.getSession().getAttribute("captcha");%>)">忘记密码</button>
        </div>
        </form>
    </c:otherwise>

</c:choose>




</body>
</html>
